<template>
<div class="hello">
    <button @click='add11'>Child3-add1</button>
    <button @click='add22'>Child3-add2</button>
    <button @click='add33'>Child3-add3</button>
    Child3:username1:{{$attrs.username1}}--usertest1:{{usertest1}}
</div>
</template>

<script>
export default {
    name: 'Child3',
    props: {
        //username1: String,
    },
    inject:['usertest1', 'usertest2'],
    methods: {
        add11 () {
            console.log(11);
        },
        add22 () {
            console.log('Child3:add22');
            this.$emit('testAdd1', '11');
        },
        add33 () {
            console.log(33);
        },
    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>
